MenuItems.render - Code Metrics - Inspection of "#208: Remove console.logs." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/208-consolelogs ( 716e6c )

by Kevin Van

created 2020-06-16 14:30 UTC

MenuItems.render B

↳ Parent: MenuItems

Complexity

Conditions

Size

Total Lines	272
Code Lines	245

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	245
dl	0
loc	272
rs	7
c	0
b	0
f	0

How to fix Long Method

import React, { Component, Fragment } from "react"
import { Link } from "gatsby"

import "./page-header.scss"
import logo from "../images/logo-flat.png"
// import bauvall from '../images/bauvall.png'

/**
 * Search for the closest match of a selector.
 *
 * Vanilla JS version of $.closest().
 *
 * @param {*} elem
 *   HTML DOMElement.
 * @param {*} selector
 *   CSS selector to search for (needle).
 */
const getClosest = (elem, selector) => {
  // Element.matches() polyfill
  if (!Element.prototype.matches) {
    Element.prototype.matches =
      Element.prototype.matchesSelector ||
      Element.prototype.mozMatchesSelector ||
      Element.prototype.msMatchesSelector ||
      Element.prototype.oMatchesSelector ||
      Element.prototype.webkitMatchesSelector ||
      function (s) {
        const matches = (this.document || this.ownerDocument).querySelectorAll(
          s
        )
        let i = matches.length
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1
      }
  }

  // Get closest match
  for (; elem && elem !== document; elem = elem.parentNode) {
    if (elem.matches(selector)) return elem
  }

  return null
}

/**
 * Render the menu items with proper <Link>'s.
 */
class MenuItems extends Component {
  componentDidMount() {
    const activeLinks = document.querySelectorAll(".active")
    let parent = null

    activeLinks.forEach((activeLink) => {
      parent = getClosest(activeLink, ".submenu")
      if (parent !== null) {
        parent.classList.add("is-active")
      }
    })
  }

  render() {
    return (
      <Fragment>
        <li>
          <Link to="/" activeClassName="active" partiallyActive={false}>
            Home
          </Link>
        </li>
        <li>
          <Link to="/news/" activeClassName="active" partiallyActive={true}>
            Nieuws
          </Link>
        </li>
        <li>
          <Link to="/events/" activeClassName="active" partiallyActive={true}>
            Evenementen
          </Link>
        </li>
        <li>
          <Link
            to="/team/a-ploeg"
            activeClassName="active"
            partiallyActive={true}
          >
            A-Ploeg
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link
                to="/team/a-ploeg#team-info"
                activeClassName="active"
                partiallyActive={true}
              >
                Info
              </Link>
              <Link
                to="/team/a-ploeg#team-lineup"
                activeClassName="active"
                partiallyActive={true}
              >
                Spelers &amp; Staff
              </Link>
              <Link
                to="/team/a-ploeg#team-matches"
                activeClassName="active"
                partiallyActive={true}
              >
                Wedstrijden
              </Link>
            </li>
            <li>
              <Link
                to="/team/a-ploeg#team-ranking"
                activeClassName="active"
                partiallyActive={true}
              >
                Stand
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link
            to="/team/b-ploeg"
            activeClassName="active"
            partiallyActive={true}
          >
            B-Ploeg
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link
                to="/team/b-ploeg#team-info"
                activeClassName="active"
                partiallyActive={true}
              >
                Info
              </Link>
              <Link
                to="/team/b-ploeg#team-lineup"
                activeClassName="active"
                partiallyActive={true}
              >
                Spelers &amp; Staff
              </Link>
              <Link
                to="/team/b-ploeg#team-matches"
                activeClassName="active"
                partiallyActive={true}
              >
                Wedstrijden
              </Link>
            </li>
            <li>
              <Link
                to="/team/b-ploeg#team-ranking"
                activeClassName="active"
                partiallyActive={true}
              >
                Stand
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/jeugd/" activeClassName="active" partiallyActive={true}>
            Jeugd
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link
                to="/jeugd/u15/"
                activeClassName="active"
                partiallyActive={true}
              >
                U15
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u13/"
                activeClassName="active"
                partiallyActive={true}
              >
                U13
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u12/"
                activeClassName="active"
                partiallyActive={true}
              >
                U12
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u11/"
                activeClassName="active"
                partiallyActive={true}
              >
                U11
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u10/"
                activeClassName="active"
                partiallyActive={true}
              >
                U10
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u9/"
                activeClassName="active"
                partiallyActive={true}
              >
                U9
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u8/"
                activeClassName="active"
                partiallyActive={true}
              >
                U8
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u7/"
                activeClassName="active"
                partiallyActive={true}
              >
                U7
              </Link>
            </li>
            <li>
              <Link
                to="/jeugd/u6/"
                activeClassName="active"
                partiallyActive={true}
              >
                U6
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
            Sponsors
          </Link>
        </li>
        <li>
          <Link to="/club/" activeClassName="active" partiallyActive={true}>
            De club
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link
                to="/club/history/"
                activeClassName="active"
                partiallyActive={true}
              >
                Geschiedenis
              </Link>
            </li>
            <li>
              <Link
                to="/club/bestuur/"
                activeClassName="active"
                partiallyActive={true}
              >
                Bestuur
              </Link>
            </li>
            <li>
              <Link
                to="/club/jeugdbestuur/"
                activeClassName="active"
                partiallyActive={true}
              >
                Jeugdbestuur
              </Link>
            </li>
            <li>
              <Link
                to="/club/responsibilities/"
                activeClassName="active"
                partiallyActive={true}
              >
                Verantwoordelijkheden
              </Link>
            </li>
            <li>
              <Link
                to="/club/ultras/"
                activeClassName="active"
                partiallyActive={true}
              >
                KCVV Ultras
              </Link>
            </li>
            <li>
              <Link
                to="/club/contact/"
                activeClassName="active"
                partiallyActive={true}
              >
                Contact
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/search/" activeClassName="active" partiallyActive={true}>
            <i className={"fa fa-search"} aria-hidden="true"></i>{" "}
            <span
              className={
                "display-mobile--inline-block display-mobile search--label"
              }
            >
              Zoeken
            </span>
          </Link>
        </li>
      </Fragment>
    )
  }
}

/**
 * Render the desktop version of the header.
 */
class PageHeader extends Component {
  render() {
    return (
      // <!-- START STICKY CONTAINER --> //
      // <header data-sticky-container className="l--header">
      <header className="l--header">
        {/* <!-- START STICKY INNER --> */}
        {/* <div data-sticky data-options="marginTop:0;"> */}
        <div>
          {/* <!-- START MOBILE NAV BAR --> */}
          <div
            className="header--mobile"
            data-responsive-toggle="responsive-menu"
            data-hide-for="large"
          >
            <button
              type="button"
              className="menu-icon"
              data-toggle="responsiveNavigation"
              aria-label="Toggle Responsive navigation"
            />
            <div className="header-mobile__logo">
              <Link to="/">
                <img
                  src={logo}
                  alt="KCVV Elewijt"
                  className="header-mobile__logo-img"
                />
              </Link>
            </div>
          </div>
          {/* <!-- END MOBILE NAV BAR --> */}

          {/* <!-- START DESKTOP NAV BAR --> */}
          <div className="header--desktop">
            <div className="header__secondary show-for-large">
              <div className="grid-container">
                <div className="grid-x">
                  <div className="medium-4 medium-offset-8">
                    <div className="sponsors--header"></div>
                  </div>
                </div>
              </div>
            </div>
            <div className="header__primary show-for-large">
              <div className="grid-container">
                <div className="header__primary-inner">
                  {/* LOGO */}
                  <div className="header-logo">
                    <Link to="/">
                      <img
                        src={logo}
                        alt="KCVV Elewijt"
                        className="header__logo-img"
                      />
                    </Link>
                  </div>
                  <nav className="main-nav">
                    <ul
                      className="main-nav__list--desktop menu dropdown"
                      data-dropdown-menu
                    >
                      <MenuItems />
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* <!-- END DESKTOP NAV BAR --> */}

        {/* <!-- END STICKY INNER --> */}
      </header>
      // <!-- END STICKY CONTAINER --> //
    )
  }
}

/**
 * Render the mobile version of the header.
 */
export class PageHeaderMobile extends Component {
  render() {
    return (
      <nav
        className="off-canvas position-left"
        id="responsiveNavigation"
        data-off-canvas
      >
        <ul
          className="main-nav__list vertical menu"
          data-responsive-menu="accordion large-dropdown"
        >
          <div className="header-mobile__logo">
            <button
              aria-label="Close menu"
              type="button"
              data-toggle=""
              className="button--back"
            >
              {/* <span aria-hidden="true" /> */}
            </button>

            <Link to="/">
              <img
                src={logo}
                alt="KCVV Elewijt"
                className="header-mobile__logo-img"
              />
            </Link>
          </div>

          <MenuItems />

          <li className="main-nav__item--social-links">
            <a
              href="index.html"
              className="social-links__link"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Facebook"
            >
              <i className="fa fa fa-facebook" />
            </a>

            <a
              href="index.html"
              className="social-links__link"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Twitter"
            >
              <i className="fa fa fa-twitter" />
            </a>

            <a
              href="index.html"
              className="social-links__link"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Instagram"
            >
              <i className="fa fa fa-instagram" />
            </a>
          </li>
        </ul>
      </nav>
    )
  }
}

export default PageHeader


1			import React, { Component, Fragment } from "react"
2			import { Link } from "gatsby"
3
4			import "./page-header.scss"
5			import logo from "../images/logo-flat.png"
6			// import bauvall from '../images/bauvall.png'
7
8			/**
9			* Search for the closest match of a selector.
10			*
11			* Vanilla JS version of $.closest().
12			*
13			* @param {*} elem
14			* HTML DOMElement.
15			* @param {*} selector
16			* CSS selector to search for (needle).
17			*/
18			const getClosest = (elem, selector) => {
19			// Element.matches() polyfill
20			if (!Element.prototype.matches) {
21			Element.prototype.matches =
22			Element.prototype.matchesSelector \|\|
23			Element.prototype.mozMatchesSelector \|\|
24			Element.prototype.msMatchesSelector \|\|
25			Element.prototype.oMatchesSelector \|\|
26			Element.prototype.webkitMatchesSelector \|\|
27			function (s) {
28			const matches = (this.document \|\| this.ownerDocument).querySelectorAll(
29			s
30			)
31			let i = matches.length
32			while (--i >= 0 && matches.item(i) !== this) {}
33			return i > -1
34			}
35			}
36
37			// Get closest match
38			for (; elem && elem !== document; elem = elem.parentNode) {
39			if (elem.matches(selector)) return elem
40			}
41
42			return null
43			}
44
45			/**
46			* Render the menu items with proper <Link>'s.
47			*/
48			class MenuItems extends Component {
49			componentDidMount() {
50			const activeLinks = document.querySelectorAll(".active")
51			let parent = null
52
53			activeLinks.forEach((activeLink) => {
54			parent = getClosest(activeLink, ".submenu")
55			if (parent !== null) {
56			parent.classList.add("is-active")
57			}
58			})
59			}
60
61			render() {
62			return (
63			<Fragment>
64			<li>
65			<Link to="/" activeClassName="active" partiallyActive={false}>
66			Home
67			</Link>
68			</li>
69			<li>
70			<Link to="/news/" activeClassName="active" partiallyActive={true}>
71			Nieuws
72			</Link>
73			</li>
74			<li>
75			<Link to="/events/" activeClassName="active" partiallyActive={true}>
76			Evenementen
77			</Link>
78			</li>
79			<li>
80			<Link
81			to="/team/a-ploeg"
82			activeClassName="active"
83			partiallyActive={true}
84			>
85			A-Ploeg
86			</Link>
87			<ul className="vertical menu submenu">
88			<li>
89			<Link
90			to="/team/a-ploeg#team-info"
91			activeClassName="active"
92			partiallyActive={true}
93			>
94			Info
95			</Link>
96			<Link
97			to="/team/a-ploeg#team-lineup"
98			activeClassName="active"
99			partiallyActive={true}
100			>
101			Spelers & Staff
102			</Link>
103			<Link
104			to="/team/a-ploeg#team-matches"
105			activeClassName="active"
106			partiallyActive={true}
107			>
108			Wedstrijden
109			</Link>
110			</li>
111			<li>
112			<Link
113			to="/team/a-ploeg#team-ranking"
114			activeClassName="active"
115			partiallyActive={true}
116			>
117			Stand
118			</Link>
119			</li>
120			</ul>
121			</li>
122			<li>
123			<Link
124			to="/team/b-ploeg"
125			activeClassName="active"
126			partiallyActive={true}
127			>
128			B-Ploeg
129			</Link>
130			<ul className="vertical menu submenu">
131			<li>
132			<Link
133			to="/team/b-ploeg#team-info"
134			activeClassName="active"
135			partiallyActive={true}
136			>
137			Info
138			</Link>
139			<Link
140			to="/team/b-ploeg#team-lineup"
141			activeClassName="active"
142			partiallyActive={true}
143			>
144			Spelers & Staff
145			</Link>
146			<Link
147			to="/team/b-ploeg#team-matches"
148			activeClassName="active"
149			partiallyActive={true}
150			>
151			Wedstrijden
152			</Link>
153			</li>
154			<li>
155			<Link
156			to="/team/b-ploeg#team-ranking"
157			activeClassName="active"
158			partiallyActive={true}
159			>
160			Stand
161			</Link>
162			</li>
163			</ul>
164			</li>
165			<li>
166			<Link to="/jeugd/" activeClassName="active" partiallyActive={true}>
167			Jeugd
168			</Link>
169			<ul className="vertical menu submenu">
170			<li>
171			<Link
172			to="/jeugd/u15/"
173			activeClassName="active"
174			partiallyActive={true}
175			>
176			U15
177			</Link>
178			</li>
179			<li>
180			<Link
181			to="/jeugd/u13/"
182			activeClassName="active"
183			partiallyActive={true}
184			>
185			U13
186			</Link>
187			</li>
188			<li>
189			<Link
190			to="/jeugd/u12/"
191			activeClassName="active"
192			partiallyActive={true}
193			>
194			U12
195			</Link>
196			</li>
197			<li>
198			<Link
199			to="/jeugd/u11/"
200			activeClassName="active"
201			partiallyActive={true}
202			>
203			U11
204			</Link>
205			</li>
206			<li>
207			<Link
208			to="/jeugd/u10/"
209			activeClassName="active"
210			partiallyActive={true}
211			>
212			U10
213			</Link>
214			</li>
215			<li>
216			<Link
217			to="/jeugd/u9/"
218			activeClassName="active"
219			partiallyActive={true}
220			>
221			U9
222			</Link>
223			</li>
224			<li>
225			<Link
226			to="/jeugd/u8/"
227			activeClassName="active"
228			partiallyActive={true}
229			>
230			U8
231			</Link>
232			</li>
233			<li>
234			<Link
235			to="/jeugd/u7/"
236			activeClassName="active"
237			partiallyActive={true}
238			>
239			U7
240			</Link>
241			</li>
242			<li>
243			<Link
244			to="/jeugd/u6/"
245			activeClassName="active"
246			partiallyActive={true}
247			>
248			U6
249			</Link>
250			</li>
251			</ul>
252			</li>
253			<li>
254			<Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
255			Sponsors
256			</Link>
257			</li>
258			<li>
259			<Link to="/club/" activeClassName="active" partiallyActive={true}>
260			De club
261			</Link>
262			<ul className="vertical menu submenu">
263			<li>
264			<Link
265			to="/club/history/"
266			activeClassName="active"
267			partiallyActive={true}
268			>
269			Geschiedenis
270			</Link>
271			</li>
272			<li>
273			<Link
274			to="/club/bestuur/"
275			activeClassName="active"
276			partiallyActive={true}
277			>
278			Bestuur
279			</Link>
280			</li>
281			<li>
282			<Link
283			to="/club/jeugdbestuur/"
284			activeClassName="active"
285			partiallyActive={true}
286			>
287			Jeugdbestuur
288			</Link>
289			</li>
290			<li>
291			<Link
292			to="/club/responsibilities/"
293			activeClassName="active"
294			partiallyActive={true}
295			>
296			Verantwoordelijkheden
297			</Link>
298			</li>
299			<li>
300			<Link
301			to="/club/ultras/"
302			activeClassName="active"
303			partiallyActive={true}
304			>
305			KCVV Ultras
306			</Link>
307			</li>
308			<li>
309			<Link
310			to="/club/contact/"
311			activeClassName="active"
312			partiallyActive={true}
313			>
314			Contact
315			</Link>
316			</li>
317			</ul>
318			</li>
319			<li>
320			<Link to="/search/" activeClassName="active" partiallyActive={true}>
321			<i className={"fa fa-search"} aria-hidden="true"></i>{" "}
322			<span
323			className={
324			"display-mobile--inline-block display-mobile search--label"
325			}
326			>
327			Zoeken
328			</span>
329			</Link>
330			</li>
331			</Fragment>
332			)
333			}
334			}
335
336			/**
337			* Render the desktop version of the header.
338			*/
339			class PageHeader extends Component {
340			render() {
341			return (
342			// <!-- START STICKY CONTAINER --> //
343			// <header data-sticky-container className="l--header">
344			<header className="l--header">
345			{/* <!-- START STICKY INNER --> */}
346			{/* <div data-sticky data-options="marginTop:0;"> */}
347			<div>
348			{/* <!-- START MOBILE NAV BAR --> */}
349			<div
350			className="header--mobile"
351			data-responsive-toggle="responsive-menu"
352			data-hide-for="large"
353			>
354			<button
355			type="button"
356			className="menu-icon"
357			data-toggle="responsiveNavigation"
358			aria-label="Toggle Responsive navigation"
359			/>
360			<div className="header-mobile__logo">
361			<Link to="/">
362			<img
363			src={logo}
364			alt="KCVV Elewijt"
365			className="header-mobile__logo-img"
366			/>
367			</Link>
368			</div>
369			</div>
370			{/* <!-- END MOBILE NAV BAR --> */}
371
372			{/* <!-- START DESKTOP NAV BAR --> */}
373			<div className="header--desktop">
374			<div className="header__secondary show-for-large">
375			<div className="grid-container">
376			<div className="grid-x">
377			<div className="medium-4 medium-offset-8">
378			<div className="sponsors--header"></div>
379			</div>
380			</div>
381			</div>
382			</div>
383			<div className="header__primary show-for-large">
384			<div className="grid-container">
385			<div className="header__primary-inner">
386			{/* LOGO */}
387			<div className="header-logo">
388			<Link to="/">
389			<img
390			src={logo}
391			alt="KCVV Elewijt"
392			className="header__logo-img"
393			/>
394			</Link>
395			</div>
396			<nav className="main-nav">
397			<ul
398			className="main-nav__list--desktop menu dropdown"
399			data-dropdown-menu
400			>
401			<MenuItems />
402			</ul>
403			</nav>
404			</div>
405			</div>
406			</div>
407			</div>
408			</div>
409			{/* <!-- END DESKTOP NAV BAR --> */}
410
411			{/* <!-- END STICKY INNER --> */}
412			</header>
413			// <!-- END STICKY CONTAINER --> //
414			)
415			}
416			}
417
418			/**
419			* Render the mobile version of the header.
420			*/
421			export class PageHeaderMobile extends Component {
422			render() {
423			return (
424			<nav
425			className="off-canvas position-left"
426			id="responsiveNavigation"
427			data-off-canvas
428			>
429			<ul
430			className="main-nav__list vertical menu"
431			data-responsive-menu="accordion large-dropdown"
432			>
433			<div className="header-mobile__logo">
434			<button
435			aria-label="Close menu"
436			type="button"
437			data-toggle=""
438			className="button--back"
439			>
440			{/* <span aria-hidden="true" /> */}
441			</button>
442
443			<Link to="/">
444			<img
445			src={logo}
446			alt="KCVV Elewijt"
447			className="header-mobile__logo-img"
448			/>
449			</Link>
450			</div>
451
452			<MenuItems />
453
454			<li className="main-nav__item--social-links">
455			<a
456			href="index.html"
457			className="social-links__link"
458			data-toggle="tooltip"
459			data-placement="bottom"
460			title=""
461			data-original-title="Facebook"
462			>
463			<i className="fa fa fa-facebook" />
464			</a>
465
466			<a
467			href="index.html"
468			className="social-links__link"
469			data-toggle="tooltip"
470			data-placement="bottom"
471			title=""
472			data-original-title="Twitter"
473			>
474			<i className="fa fa fa-twitter" />
475			</a>
476
477			<a
478			href="index.html"
479			className="social-links__link"
480			data-toggle="tooltip"
481			data-placement="bottom"
482			title=""
483			data-original-title="Instagram"
484			>
485			<i className="fa fa fa-instagram" />
486			</a>
487			</li>
488			</ul>
489			</nav>
490			)
491			}
492			}
493
494			export default PageHeader
495

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/208-consolelogs ( 716e6c )

MenuItems.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like